@import './var.less';

.ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-border(@width: 90%) {
  position: absolute;
  content: '';
  position: absolute;
  background-color: #d8dfeb;
  height: 0.5px;
  width: @width;
}

.page() {
  min-height: 100vh;
  background-color: var(--r-neutral-bg-2, #f5f6fa);
  padding-left: 20px;
  padding-right: 20px;
}

@keyframes spining {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.chromelike-scrollbar(@bar-width: 6px) {
  &::-webkit-scrollbar {
    width: @bar-width;
    // background-color: #fafafa;
    background-color: var(--r-neutral-line, rgba(255, 255, 255, 0.1));
    padding-left: 1px;
    padding-right: 1px;
  }
  &::-webkit-scrollbar-thumb {
    // background-color: rgba(193, 193, 193, 0.7);
    background-color: rgba(var(--r-neutral-foot-rgb), 0.5);
    border-radius: 4px;
  }
}

.chromelike-scrollbar-v1(@bar-width: 6px) {
  &::-webkit-scrollbar {
    width: @bar-width;
    // background-color: #fafafa;
    background-color: transparent;
    padding-left: 1px;
    padding-right: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--rb-neutral-line, #e0e5ec);
    border-radius: 1000px;
  }
}

.child-has-chromelike-scrollbar(@bar-width: 6px) {
  * {
    .chromelike-scrollbar(@bar-width);
  }
}

.light-style-disabled-btn() {
  &:hover,
  &:focus,
  &:active,
  & {
    background: var(--r-blue-disable, rgba(112, 132, 255, 0.5));
    border-color: transparent;
  }
}

.ant-input-darkmode() {
  .ant-input {
    border-color: transparent;
    background: var(--r-neutral-card-1, #fff);
    color: var(--r-neutral-title-1, #192945);
  }
  // ant-input with addonAfter
  .ant-form-item-control-input-content .ant-input-group-wrapper .ant-input {
    background: transparent;
  }
  .ant-input-number {
    border-color: transparent;
    background: var(--r-neutral-card-1, #fff);
    color: var(--r-neutral-title-1, #192945);

    .ant-input-number-input {
      background-color: transparent;
    }
  }

  .ant-input-affix-wrapper {
    border-color: var(--r-neutral-line, rgba(255, 255, 255, 0.1));
    background: var(--r-neutral-card-2, #f2f4f7);

    .ant-input {
      background: transparent;
    }

    &:focus,
    &-focused {
      border-color: #b0bdff;
    }
  }

  .ant-input-suffix {
    color: var(--r-neutral-foot);
    .anticon-close-circle {
      color: var(--r-neutral-foot);
    }
  }
  // .ant-form-item-explain:not(.ant-form-item-explain-error) {
  //   color: var(--r-neutral-title-1);
  // }
}

.override-ant-form-item-input-has-error() {
  .ant-form-item-has-error .ant-input,
  .ant-form-item-has-error .ant-input-affix-wrapper,
  .ant-form-item-has-error .ant-input:hover,
  .ant-form-item-has-error .ant-input-affix-wrapper:hover {
    background-color: var(--r-neutral-card-2, rgba(255, 255, 255, 0.06));
  }
}

.ant-input-darkmode-withborder() {
  .ant-input-darkmode;

  .ant-input {
    border: 1px solid var(--r-neutral-line, #d3d8e0);
  }

  .ant-form-item-has-error .ant-input {
    &,
    &:hover {
      background-color: var(--r-neutral-card-1, #fff) !important;
      border-color: var(--r-red-default);
    }
  }

  .override-ant-form-item-input-has-error;
}

.ant-input-darkmode2() {
  .ant-input {
    border: 1px solid var(--r-neutral-line, rgba(255, 255, 255, 0.1));
    background: var(--r-neutral-card-2, rgba(255, 255, 255, 0.06));
    color: var(--r-neutral-title-1, #f7fafc);
  }
  .ant-input-number {
    border: 1px solid var(--r-neutral-line, rgba(255, 255, 255, 0.1));
    background: var(--r-neutral-card-2, rgba(255, 255, 255, 0.06));
    color: var(--r-neutral-title-1, #f7fafc);

    .ant-input-number-input {
      background-color: transparent;
    }
  }
  // .ant-form-item-explain:not(.ant-form-item-explain-error) {
  //   color: var(--r-neutral-title-1);
  // }

  .override-ant-form-item-input-has-error;
}

.ant-spin-darkmode() {
  .ant-spin-container.ant-spin-blur::after {
    background: var(--r-neutral-bg-1, #fff);
  }

  .ant-spin.ant-spin-spinning .ant-spin-text {
    text-shadow: 0 1px 2px var(--r-neutral-bg-1);
  }
}
